<template>
    <div>
        <el-dialog title="导入模板" :visible.sync="windowVisible" width="800px" :close-on-click-modal="false">
            <div class="chose">
                <!-- <span class="label-name">请选择考试类型名称 ：</span>
                <el-select size="mini" v-model="typeName">
                    <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
                </el-select> -->
                <el-upload :action="requestUrl" :show-file-list="false" accept=".xls,.xlsx" :data="{'batchId':defaultValue.batchId}"
                 :on-success="successFile" :on-change="fileInfo" :on-error="errorFile">
                    <div class="search-button color-primary">
                        <img src="../../../assets/assessment/icon-import-blue.png" alt="" />
                        <span>导入</span>
                    </div>
                </el-upload>
                <div class="search-button color-warning width224" @click="downloadFile">
                    <img src="../../../assets/assessment/bk-export.png" alt="" />
                    <span>下载数据模板文件</span>
                </div>
            </div>
        </el-dialog>
        <!-- 导入失败 -->
        <importError ref="error" :errorData="errorData"></importError>
    </div>
</template>
<script>
 import axios from 'axios'
 import fileDownload from "js-file-download"
 import importError from "./importError.vue"
 import {examTypeList} from "@/api/exam";
export default {
  data() {
    return {
        windowVisible:false,
        requestUrl:'',
        typeList:[],
        typeName:'',
        errorData:[],
    };
  },
  props:{
    defaultValue:{
        type:Object
    }
  },
  components:{importError},
  mounted(){
    this.getTypeList();
    if(this.defaultValue.isFixed){
        this.requestUrl= '/examScore/import46ScoreCExcel'
    }else{
        this.requestUrl= '/examScore/importPubScoreCExcel'
    }
  },
  methods: {
    async getTypeList(){
        let res = await examTypeList({size:9999,current:1})
        this.typeList = res.data.records
    },
    fileInfo(file){
        if(file.name.indexOf("xls") == -1){
            this.$message.error('请上传excl文件');
        }
    },
    successFile(response){
        this.$refs.error.windowVisible = true;
        if(response.data.errorData.length>0){
            this.errorData = {isFixed:this.defaultValue.isFixed,...response.data}
        }
        this.windowVisible = false;
    },
    errorFile(){
        
    },
    //下载模板
    downloadFile(){
        let data = {fileModelName:this.defaultValue.isFixed?'CET':'CUSTOMIZE'}
        axios({
            method: 'get',
            url: this.$store.state.baseUrl+'/downloadModelFile',
            params:data,
            headers: {'Content-Type': 'application/octet-stream' },
                responseType: 'blob'
        }).then(res => {
            fileDownload(res.data, '学籍注册数据模板.xlsx');
        });  
    }
  },
};
</script>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.width224{width: 170px;}
.color-primary{width:80px;margin: 0 20px 0 30px;}
.chose{
    margin: 25px auto 40px;
    display: flex;
    align-items: center;
    .label-name{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 0px;
        color: #004CA7;
    }
}
.color-warning{
    background: #FEF1E8;
    border: 1px solid #F86900;
    >span{color: #F86900;}
}
</style>

